<!DOCTYPE html>
<html>
<head>
    <title>preserveAspectRatio test 1/2</title>
    <style>
        th {
            background-color: #dd9;
            font-family: sans-serif;
        }

        img, object {
            /* background-color: #EBF; */
            border: 2px dashed maroon;
            height: 50px;
            left: 100px;
            overflow: visible;
            padding: 3px;
            top: 20px;
            width: 200px;
            box-sizing: border-box;
        }

        object {
            border-color: green;
            border-width: 1px;
        }
    </style>
</head>
<body onload="runAfterLayoutAndPaint(repaintTest, true);">
    <table>
        <tr>
            <th>
                viewBox?
            </th>
            <th>
                preserve&shy;Aspect&shy;Ratio
            </th>
            <th>
                &lt;img&gt;
            </th>
            <th>
                &lt;object&gt;
            </th>
        </tr>
        <tr>
            <th rowspan=4>
                No viewBox
            </th>
            <th>
            </th>
            <td>
                <img src="../../as-image/resources/circle-default-default.svg" />
            </td>
            <td>
                <object data="../../as-image/resources/circle-default-default.svg"></object>
            </td>
        </tr>
        <tr>
            <th>
                none
            </th>
            <td>
                <img src="../../as-image/resources/circle-default-none.svg" />
            </td>
            <td>
                <object data="../../as-image/resources/circle-default-none.svg"></object>
            </td>
        </tr>
        <tr>
            <th>
                meet
            </th>
            <td>
                <img src="../../as-image/resources/circle-default-meet.svg" />
            </td>
            <td>
                <object data="../../as-image/resources/circle-default-meet.svg"></object>
            </td>
        </tr>
        <tr>
            <th>
                slice
            </th>
            <td>
                <img src="../../as-image/resources/circle-default-slice.svg" />
            </td>
            <td>
                <object data="../../as-image/resources/circle-default-slice.svg"></object>
            </td>
        </tr>
        <tr>
            <th rowspan=4>
                viewBox
            </th>
            <th>
            </th>
            <td>
                <img src="../../as-image/resources/circle-viewbox-default.svg" />
            </td>
            <td>
                <object data="../../as-image/resources/circle-viewbox-default.svg"></object>
            </td>
        </tr>
        <tr>
            <th>
                none
            </th>
            <td>
                <img src="../../as-image/resources/circle-viewbox-none.svg" />
            </td>
            <td>
                <object data="../../as-image/resources/circle-viewbox-none.svg"></object>
            </td>
        </tr>
        <tr>
            <th>
                meet
            </th>
            <td>
                <img src="../../as-image/resources/circle-viewbox-meet.svg" />
            </td>
            <td>
                <object data="../../as-image/resources/circle-viewbox-meet.svg"></object>
            </td>
        </tr>
        <tr>
            <th>
                slice
            </th>
            <td>
                <img src="../../as-image/resources/circle-viewbox-slice.svg" />
            </td>
            <td>
                <object data="../../as-image/resources/circle-viewbox-slice.svg"></object>
            </td>
        </tr>
    </table>

    <script>var zoomCount = 2; window.shouldZoomOut = true;</script>
    <script src="../../../resources/run-after-layout-and-paint.js"></script>
    <script src="../resources/testPageZoom.js"></script>
</body>
</html>
